<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - AI智能教学培训系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    body {
      background: linear-gradient(135deg, #e0ecff 0%, #b3cfff 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-container {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(67,97,238,0.15);
      padding: 48px 36px 36px 36px;
      width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .login-title {
      font-size: 26px;
      font-weight: 700;
      color: #4361ee;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .el-form {
      width: 100%;
    }
    .el-form-item {
      margin-bottom: 24px;
    }
    .login-btn {
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      background: linear-gradient(90deg, #4361ee, #4895ef);
      border: none;
    }
    .login-btn:hover {
      background: linear-gradient(90deg, #3f37c9, #4361ee);
    }
  </style>
</head>
<body>
<div id="app">
  <div class="login-container">
    <div class="login-title">AI智能教学培训系统</div>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" autocomplete="username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" autocomplete="current-password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="handleLogin" :loading="loading">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loading: false,
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (!valid) return;
          this.loading = true;
          fetch('/auth/login', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.loginForm)
          })
                  .then(res => res.json())
                  .then(res => {
                    this.loading = false;
                    if (res.success) {
                      localStorage.setItem('token', res.data.token);
                      localStorage.setItem('username', res.data.username);
                      localStorage.setItem('role', res.data.role);
                      localStorage.setItem('name', res.data.name);
                      window.location.href = 'index.html';
                    } else {
                      this.$alert(res.message || '登录失败', '错误', { confirmButtonText: '确定' });
                    }
                  })
                  .catch(() => {
                    this.loading = false;
                    this.$alert('网络错误，请稍后重试', '错误', { confirmButtonText: '确定' });
                  });
        });
      }
    }
  });
</script>
</body>
</html>